<template>
  <div class="flex flex-col items-center text-center">
    <n-image v-if="imageDraw" class="w-96" :src="imageDraw" />
    <n-upload class="mt-6" :custom-request="test" :action="actionUrl" :headers="headers">
      <n-upload-dragger>
        <div style="margin-bottom: 12px" class="w-4 h-4 m-auto">
          <n-icon size="48" :depth="3">
            <archive-icon />
          </n-icon>
        </div>
        <n-text style="font-size: 16px">点击或者拖动文件到该区域来上传</n-text>
        <n-p depth="3" style="margin: 8px 0 0 0">请上传相关图片</n-p>
      </n-upload-dragger>
    </n-upload>
    <n-data-table
      class="mt-4"
      :bordered="false"
      :single-line="true"
      :columns="columns"
      :data="result"
      :pagination="pagination"
    />
  </div>
</template>

<script>
import { h, defineComponent, ref } from "vue";
import { ArchiveOutline as ArchiveIcon } from "@vicons/ionicons5";
import { NUpload, NText, NP, NUploadDragger, NButton, NImage, NDataTable, NTag } from 'naive-ui'
import axios from 'axios'
const createColumns = ({ sendMail }) => {
  return [{
    title: '大小',
    key: 'size'
  },
  {
    title: '标签',
    key: 'tags',
    render(row) {
      const tags = row.tags.map((tagKey) => {
        return h(
          NTag,
          {
            style: {
              marginRight: '6px'
            },
            type: 'info'
          },
          {
            default: () => tagKey
          }
        )
      })
      return tags
    }
  },
  {
    title: '置信度',
    key: 'p'
  }
  ]
}



export default defineComponent({
  components: {
    ArchiveIcon,
    NUpload,
    NText,
    NP,
    NUploadDragger,
    NButton,
    NImage,
    NDataTable,
    NTag
  },
  data() {
    return {
      actionUrl: "http://127.0.0.1:5003/upload",
      headers: { "Content-Type": "multipart/form-data" },

    }
  },
  setup() {
    // const imageDraw = ref("https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg")
    const imageDraw = ref("")
    const result = ref([])
    const m = {
      '0': '健康',
      '1': '腐病',
      '2': '黑星',
      '3': '锈病',
    }
    const test = ({
      file,
      data,
      headers,
      withCredentials,
      action,
      onFinish,
      onError,
      onProgress
    }) => {
      const formData = new FormData();
      if (data) {
        Object.keys(data).forEach((key) => {
          formData.append(key, data[key]);
        });
      }
      formData.append('file', file.file, file.name);
      axios.post(action, formData, {
        withCredentials,
        headers,
        onUploadProgress: ({ loaded, total }) => {
          onProgress({ percent: Math.ceil(loaded / total * 100) });
        }
      }).then((e) => {
        console.log(e)
        while(result.value.length)
          result.value.pop()
          
        imageDraw.value = e.data.draw_url
        for (let key in e.data.image_info) {
          result.value.push({
            size: e.data.image_info[key][0],
            tags: [m[key[5]]],
            p: e.data.image_info[key][1]
          })
        }
        onFinish();
      }).catch((error) => {
        onError();
      });
    }


    return {
      test,
      imageDraw,
      result,
      columns: createColumns({
        sendMail(rowData) {
          message.info('send mail to ' + rowData.name)
        }
      }),
      pagination: {
        pageSize: 10
      }
    }
  }
})
</script>